<template>
  <div class="controller-box">
    <!--下拉框声明 ↓↓↓↓-->
    <!-- 选转 -->
    <!-- 设置粗细 -->
    <Dropdown btnId="draw_set_pxWidth" direction="down">
      <div @click="setPxWidth(4)" class="btn-row g-btn">
        <hr class="pxLine" style="height: 4px;">
      </div>
      <div @click="setPxWidth(3)" class="btn-row g-btn">
        <hr class="pxLine" style="height: 3px;">
      </div>
      <div @click="setPxWidth(2)" class="btn-row g-btn">
        <hr class="pxLine" style="height: 2px;">
      </div>
      <div @click="setPxWidth(1)" class="btn-row g-btn">
        <hr class="pxLine" style="height: 1px;">
      </div>
    </Dropdown>
    <!-- 设置剪贴板类型 -->
    <Dropdown btnId="draw_set_clipbrdType" direction="down">
      <div @click="paste('in')" class="btn-row g-btn">
        软件
      </div>
      <div @click="paste('out')" class="btn-row g-btn">
        系统
      </div>
    </Dropdown>
    <!-- 设置大小 -->
    <Dropdown ref="resizeForm" :auto-close="false" btnId="draw_set_size" direction="down">
      <ResizeForm @close="$refs.resizeForm.close()" @subForm="resizeCanvas"></ResizeForm>
    </Dropdown>
    <!--下拉框声明 ↑↑↑↑-->
    <nav class="controller">
      <!-- 剪贴板 -->
      <span class="wraper">
                <span id="draw_set_clipbrdType" class="contoller-group btn-column g-btn g-select--b">
                    <Icon class="icon" icon="#icon-niantie"></Icon>
                    粘贴
                </span>
                <div class="contoller-group">
                    <div @click="cut" :class="controllerClass.AreaActive" class="btn-row g-btn g-btn--hide">
                        <Icon class="icon" icon="#icon-jianqie"></Icon>
                        <div class="btn-row-title">剪切</div>
                    </div>
                    <div @click="copy" :class="controllerClass.AreaActive" class="btn-row g-btn g-btn--hide">
                        <svg aria-hidden="true" class="icon">
                          <use xlink:href="#icon-fuzhi"></use>
                        </svg>
                        <div class="btn-row-title">复制</div>
                    </div>
                </div>
                <div class="title h7">剪贴板</div>
            </span>
      <!-- 图像 -->
      <span class="wraper">
        <span :class="controllerClass.Area" @click="$emit('chooseDrawType', 'Area')"
              class="contoller-group btn-column g-btn">
            <Icon class="icon" icon="#icon-quyu1"></Icon>
            选择
        </span>
        <div class="contoller-group">
            <div :class="controllerClass.AreaActive" class="btn-row g-btn g-btn--hide">
                <Icon class="icon" icon="#icon-jiancai"></Icon>
                <div class="btn-row-title">裁剪</div>
            </div>
            <div class="btn-row g-btn" id="draw_set_size">
                <Icon class="icon" icon="#icon-suofang"></Icon>
                <div class="btn-row-title">重新调整大小</div>
            </div>
            <div class="btn-row g-btn g-select--r">
                <Icon class="icon" icon="#icon-xuanzhuan"></Icon>
                <div class="btn-row-title">旋转</div>
            </div>
        </div>
        <div class="title h7">剪贴板</div>
      </span>
      <!-- 工具 -->
      <span class="wraper">
        <div class="iconbtn-wraper">
               <Icon :class="controllerClass.Pencil" @click="$emit('chooseDrawType', 'Pencil')" class="icon g-btn"
                     icon="#icon-icon-qianbi"></Icon>
               <Icon :class="controllerClass.Fill" @click="$emit('chooseDrawType', 'Fill')" class="icon g-btn"
                     icon="#icon-youqitong"></Icon>
               <Icon :class="controllerClass.TextArea" @click="$emit('chooseDrawType', 'TextArea')"
                     class="icon g-btn" icon="#icon-wenben"></Icon>
               <Icon :class="controllerClass.Eraser" @click="$emit('chooseDrawType', 'Eraser')" class="icon g-btn"
                     icon="#icon-xiangpi"></Icon>
               <Icon :class="controllerClass.ColorPicker" @click="$emit('chooseDrawType', 'ColorPicker')"
                     class="icon g-btn" icon="#icon-quse"></Icon>
               <Icon class="icon g-btn" icon="#icon-fangdajing"></Icon>
          </div>
      </span>
      <!-- 刷子（时间不允许做了） -->
      <!--            <span class="wraper">-->
      <!--                <span class="contoller-group btn-column g-btn g-select&#45;&#45;b">-->
      <!--                    <Icon class="icon" icon="#icon-bishua"></Icon>-->
      <!--                    刷子-->
      <!--                </span>-->
      <!--            </span>-->
      <!-- 形状 -->
      <span class="wraper">
        <div class="iconbtn-wraper2">
            <span class="draw-icon draw-icon-line g-btn"></span>
            <span class="draw-icon draw-icon-rect g-btn"></span>
            <span class="draw-icon draw-icon-circle g-btn"></span>
            <span class="draw-icon draw-icon-polygon g-btn"></span>
        </div>
        <div class="contoller-group">
            <div class="btn-row g-btn g-select--r">
                <Icon class="icon g-btn" icon="#icon-lunkuo"></Icon>
                <div class="btn-row-title">轮廓</div>
            </div>
            <div class="btn-row g-btn g-select--r">
                <Icon class="icon g-btn" icon="#icon-tianchong"></Icon>
                <div class="btn-row-title">填充</div>
            </div>
        </div>
        <div class="title h7">形状</div>
      </span>
      <!-- 粗细 -->
      <span class="wraper">
        <span :class="`${controllerClass.PencilActive || controllerClass.EraserActive}`" class="contoller-group btn-column g-btn g-btn--hide g-select--b"
              id="draw_set_pxWidth">
            <hr style="height: 5px">
            <hr style="height: 4px">
            <hr style="height: 3px">
            <hr style="height: 2px">
            粗细
        </span>
      </span>
      <!-- 颜色 -->
      <span class="wraper">
          <span :class="activeColorType === 'foregroundColor'?'g-btn-active':''" @click="activeColorType='foregroundColor'"
                class="contoller-group btn-column g-btn">
            <div :style="getBackColorStyle(foregroundColor)" @click="$emit('setOption', {})"
                 class="color-block-2"></div>
            颜色1
          </span>
          <span :class="activeColorType === 'backgroundColor'?'g-btn-active':''" @click="activeColorType='backgroundColor'"
                class="contoller-group btn-column g-btn">
            <div :style="getBackColorStyle(backgroundColor)" class="color-block-2"></div>
            颜色2
          </span>
          <div class="color-wraper">
             <div :key="index"
                  :style="getBackColorStyle(item)"
                  @click="setColor(item)" class="color-wraper-item color-block-0" v-for="(item, index) in canvasController.defaultColors">
             </div>
             <div :key="index"
                  :style="getBackColorStyle(item)"
                  @click="setColor(item)" class="color-wraper-item color-block-0" v-for="(item, index) in myColors">
             </div>
          </div>
          <div class="title h7">颜色</div>
          <span @click="$refs.chooseColor.click()" class="contoller-group btn-column g-btn">
            <Icon class="icon g-btn" icon="#icon-yansetiaozheng"></Icon>
            编辑颜色
            <input id="chooseColor" ref="chooseColor" @change="test" class="color-picker" type="color">
          </span>
        </span>
    </nav>
  </div>
</template>

<script>
  import Dropdown from '../../../components/dropdown/Dropdown';
  import ResizeForm from './ResizeForm';

  export default {
    name: "DrawController",
    components: {Dropdown, ResizeForm},
    props: ['drawerType', 'option', 'canvasController'],
    data() {
      const myColors = new Array(10).fill('#fff');
      return {
        activeColorType: 'foregroundColor', // 前景色foregroundColor背景色backgroundColor
        foregroundColor: '',
        backgroundColor: '',
        myColors: myColors,
      }
    },
    created() {
    },
    mounted() {
      this.foregroundColor = this.option.foregroundColor;
      this.backgroundColor = this.option.backgroundColor;
    },
    methods: {
      test({target}) {
        this.myColors.pop();
        this.myColors.unshift(target.value);
        console.log('color', target.value);
      },
      paste(type) {
        this.$emit('setOption', {clipbrdType: type});
        this.canvasController.activeTool.doPaste();
      },
      cut() {
        this.canvasController.activeTool.cut();
      },
      copy() {
        this.canvasController.activeTool.copy();
      },
      setPxWidth(pxWidth) {
        this.$emit('setOption', {pxWidth});
      },
      setColor(color) {
        this.$emit('setOption', {
          [this.activeColorType]: color
        });
        this[this.activeColorType] = color;
      },
      resizeCanvas({width, height}) {
        console.log(width, height);
        this.$parent.resizeCanvas({width, height});
      },
      getBackColorStyle(backgroundColor) {
        return {
          backgroundColor
        }
      }
    },
    computed: {
      controllerClass() {
        return {
          [this.drawerType]: 'g-btn-active',
          [`${this.drawerType}Active`]: 'g-btn--nohide'
        };
      },
    }
  }
</script>

<style scoped>
  .controller-box {
    width: 100%;
    height: 110px;
  }

  /* 软件工具面板 */
  .controller {
    display: flex;
    width: 100%;
    height: 110px;
    padding: 5px 5px 20px 5px;
    overflow-x: auto;
    background: var(--color_gray0);

    & .wraper {
      display: flex;
      align-items: center;
      position: relative;
      width: auto;
      height: 100%;
      padding: 1px 10px 1px 0;

      & .title {
        position: absolute;
        bottom: -20px;
        width: 100%;
        text-align: center;
        height: 20px;
        line-height: 20px;
      }

      & .title.h7 {
        color: #5a5a5a;
      }
    }
  }

  .contoller-group {
    display: inline-block;
    height: 100%;
    vertical-align: middle; /*防止inline-block中图片或文字下沉*/
  }

  /* 工具 */
  .pxLine {
    margin: 0 auto;
    color: #1E395B;
    width: 40px;
  }

  /* 其他部件 */
  .color-block-0, .color-block-1,
  .color-block-2, .color-block-3 {
    display: inline-block;
    border: 1px solid #ccc;
  }

  .color-block-0 {
    width: 18px;
    height: 18px;
  }

  .color-block-1 {
    width: 26px;
    height: 24px;
  }

  .color-block-2 {
    width: 32px;
    height: 32px;
    margin-top: 8px;
  }

  .color-block-3 {
    width: 74px;
    height: 52px;
  }

  .color-picker {
    width: 0;height: 0;float: left;opacity: 0;
  }
</style>
